<template>
  <div class="theme-color-picker">
    <el-popover
      placement="bottom"
      :width="300"
      trigger="click"
      popper-class="theme-popover"
    >
      <template #reference>
        <div class="color-box" :style="{ backgroundColor: currentColor }">
          <el-icon><Brush /></el-icon>
        </div>
      </template>
      
      <template #default>
        <div class="popover-content">
          <div class="popover-title">自定义主题色</div>
          <div class="preset-colors">
            <div 
              v-for="(color, index) in presetColors" 
              :key="index"
              class="color-item"
              :style="{ backgroundColor: color }"
              @click="selectColor(color)"
            ></div>
          </div>
          <div class="custom-color">
            <el-color-picker 
              v-model="pickedColor" 
              size="default" 
              show-alpha 
              @change="onColorChange"
            />
            <span class="color-value">{{ pickedColor }}</span>
          </div>
          <div class="preview">
            <div class="preview-title">预览效果</div>
            <div class="preview-content">
              <el-button :style="buttonStyle">按钮</el-button>
              <el-tag :style="tagStyle">标签</el-tag>
              <div class="link" :style="{ color: pickedColor }">链接文本</div>
            </div>
          </div>
          <div class="actions">
            <el-button size="small" @click="resetTheme">重置</el-button>
            <el-button 
              type="primary" 
              size="small" 
              :style="applyButtonStyle"
              @click="applyTheme"
            >
              应用
            </el-button>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useTheme } from '@/hooks/useTheme'
import { Brush } from '@element-plus/icons-vue'

// 预设颜色选项
const presetColors = [
  '#0165FF', // 蓝色
  '#e84749', // 红色
  '#0c2b54', // 深蓝
  '#62a7ff', // 浅蓝
  '#14c0c0', // 青色
  '#67c23a', // 绿色
  '#9c27b0', // 紫色
  '#ff9800', // 橙色
  '#795548', // 棕色
  '#607d8b'  // 蓝灰色
]

// 使用主题钩子
const { themeColor, generateThemeVars, applyThemeVars, changeTheme } = useTheme()

// 当前选中的颜色
const pickedColor = ref(themeColor.value)
const currentColor = ref(themeColor.value)

// 按钮样式
const buttonStyle = computed(() => ({
  backgroundColor: pickedColor.value,
  borderColor: pickedColor.value,
  color: '#ffffff'
}))

// 应用按钮样式
const applyButtonStyle = computed(() => ({
  backgroundColor: pickedColor.value,
  borderColor: pickedColor.value
}))

// 标签样式
const tagStyle = computed(() => {
  // 转为RGB
  let r, g, b
  if (pickedColor.value.startsWith('#')) {
    const hex = pickedColor.value.substring(1)
    r = parseInt(hex.substring(0, 2), 16)
    g = parseInt(hex.substring(2, 4), 16)
    b = parseInt(hex.substring(4, 6), 16)
  } else {
    return {}
  }
  
  return {
    backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
    borderColor: `rgba(${r}, ${g}, ${b}, 0.2)`,
    color: pickedColor.value
  }
})

// 选择预设颜色
const selectColor = (color) => {
  pickedColor.value = color
  onColorChange(color)
}

// 颜色变化处理
const onColorChange = (color) => {
  if (!color) return
  
  // 预览主题变量应用
  const themeVars = generateThemeVars(color, 'preview-primary')
  applyThemeVars(themeVars, '.theme-popover')
}

// 应用主题
const applyTheme = () => {
  // 生成主题变量
  const themeVars = generateThemeVars(pickedColor.value, 'custom-primary')
  
  // 应用到全局
  applyThemeVars(themeVars)
  
  // 保存当前颜色
  currentColor.value = pickedColor.value
  
  // 切换到自定义主题
  changeTheme('custom')
  
  // 保存自定义颜色到本地存储
  localStorage.setItem('customThemeColor', pickedColor.value)
}

// 重置主题
const resetTheme = () => {
  // 重置为默认蓝色主题
  changeTheme('blue')
  pickedColor.value = '#0165FF'
  currentColor.value = '#0165FF'
}

// 组件挂载时初始化
onMounted(() => {
  // 从本地存储恢复自定义颜色
  const savedColor = localStorage.getItem('customThemeColor')
  if (savedColor) {
    currentColor.value = savedColor
  }
})
</script>

<style lang="scss" scoped>
.theme-color-picker {
  display: inline-flex;
  margin-right: 10px;
  
  .color-box {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.1);
    
    &:hover {
      transform: scale(1.05);
    }
    
    .el-icon {
      color: white;
      font-size: 16px;
    }
  }
}

.popover-content {
  padding: 10px;
  
  .popover-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color);
  }
  
  .preset-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    
    .color-item {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
      
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  
  .custom-color {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .color-value {
      margin-left: 10px;
      font-size: 14px;
      color: var(--text-color-secondary);
    }
  }
  
  .preview {
    margin-bottom: 15px;
    
    .preview-title {
      font-size: 14px;
      margin-bottom: 8px;
      color: var(--text-color-secondary);
    }
    
    .preview-content {
      display: flex;
      gap: 10px;
      align-items: center;
      
      .link {
        cursor: pointer;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  
  .actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}

// 全局样式，需要在main.js中导入
:global(.theme-popover) {
  // 预览主题变量会应用到这里
}
</style> 